<template>
	<view :class="['mainBtn', {'hovered': isHover}]" id="mainBtn"
		style="background-color:ghostwhite;display: flex;flex-direction: column;width: 100%;height: 100%;"
		@click="goPoster" class="mainBtn shadow-warp radius bg-white padding-sm margin-xs radius text-center">
		<view style="justify-content: flex-start;display: flex;margin-left: 10px;"
			class="text-bold text-black text-lg margin-top-sm text-shadow">
			{{message}}
		</view>

		<view style="justify-content: flex-start;display: flex;margin-left: 10px;"
			class="text-gray text-sm text-shadow"> 享受终身</view>

		<view class="imageview" style="display: flex;justify-content: flex-start;">
			<image src="https://cdn.zhoukaiwen.com/qdpz_hbbj3.gif" mode=""
				style="height:80px;width: 80px;display: flex; flex-shrink: 0; object-fit: cover;"></image>
			<view class="wenzi" v-if="title !== null">
				<p>{{title}}</p>
				<p style="color: red;font-weight: 500;">最高 $572</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['message', 'title'],
		data() {
			return {
				showWenzi: false,
				screenWidth: 0
			}
		},
		mounted() {},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.hovered {
		/* 悬停时的样式，可以根据需求修改 */
		width: 150px;
	}

	.imageview {
		display: flex;
		justify-content: space-around;
	}

	.wenzi {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-grow: 1;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		
		white-space: nowrap;
	}
</style>